<template>
  <div class="body">
    <div>
      <a @click="goto" class="el-icon-close"></a>
      <span class="bz">帮助</span>
    </div>
    <!--标题-->
    <p>欢迎登录猪猪外卖</p>
    <div>
      <!--input-->
      <div v-show="!isshow">
        <span class="span">
        <a>+86</a>
        <a class="el-icon-arrow-right"></a>
      </span>
        <input v-model="name" class="ipt" type="text" placeholder="请输入手机号">
        <van-divider class="fenge" />
        <input v-model="password" class="ipt" type="password" placeholder="请输入密码">
      </div>
      <div v-show="isshow" class="ewm">
        <div ref="qrcode"></div>
<!--        <img src="../Sign/img/app.png" width="100px"height="100px">-->
      </div>
      <van-divider class="fenge" />
      <div class="a">未注册的账号将自动注册</div>
    </div>
    <!--checkbox-->
    <div class="ipt1">
      <input type="checkbox" id="agree" v-model="isagree">
      我已阅读并同意<a>《要死了用户协议》</a>、<a>《隐私政策》</a>，并授权要死了使用该要死了账号信息(如昵称、头像、收货地址)进行统一管理。
    </div>
    <!--按钮-->
    <div class="button">
      <button @click="goto1" :disabled="!isagree">登录</button>
    </div>
    <!--切换-->
    <div class="qiehuan">
      <a @click="but">{{text}}</a>
      <a class="bz">遇到问题</a>
    </div>
    <!--图片-->
    <div class="img">
      <el-row>
        <el-col :span="8"><img src="https://i01piccdn.sogoucdn.com/3ad6663e8757d437" width="40px"height="40px"></el-col>
        <el-col :span="8"><img src="http://5b0988e595225.cdn.sohucs.com/images/20190903/b8b9b6b3cfe246609d7a073751d0cdf1.jpeg"width="40px"height="40px"></el-col>
        <el-col :span="8"><img src="http://n.sinaimg.cn/translate/8/w485h323/20180322/eUmx-fyskeue4532098.jpg"width="40px"height="40px"></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  name: "denglu",
  data(){
    return{
      qrcode: '',
      isagree:false,
      isshow:false,
      text:'扫码登录',
      Tips:'',
      name:'',
      password:''
    }
  },
  components: {
    QRCode: QRCode
  },
  methods:{
    goto(){
      this.$router.push('/Profile')
    },
    goto1(){
      // this.$router.push('/Profile')
      this.$router.push({name:'Profile',params:{name:this.name,pass:this.password}})
    },
    but(){
      this.text == '扫码登录' ? this.text = '密码登录' : this.text = '扫码登录'
      this.isshow = !this.isshow
      this.isshow1 = !this.isshow1
      this.isyzm = false
    },
    add(){
      this.isyzm = !this.isyzm
    },
    getQrcode(text){
      this.$nextTick(function () {
        this.$refs.qrcode.innerHTML = '' // 用于清空生成的二维码
        let qrcode = new QRCode(this.$refs.qrcode, {
          text: text, // 二维码内容
          width: 100,
          height: 100,
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff', // 二维码背景色
          correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
        })
        this.qrcode = qrcode
      })
    }
  },
  mounted(){
    this.getQrcode('欢迎登录猪猪外卖');
  }
}
</script>

<style scoped>
  .body{
    height: 633px;
  }
  .bz{
    float: right;
    font-size: 10px;
    color: #f15d17;
  }
  p{
    font-size: 30px;
    margin-left: 20px;
    font-family: 华文行楷;
    color: #f15d17;
  }
  .ipt{
    list-style: none;
    border: none;
    height: 30px;
    padding-left: 50px;
    font-size: 15px;
    font-family: 华文仿宋;
    background-color: #f4f4f4;
  }
  .span{
    position: relative;
    left: 55px;
    color: #f15d17;
    font-size: 15px;
  }
  .a{
    font-size: 10px;
    margin: 0px 50px 0px 50px;
    color: #9e9c9c;
  }
  .fenge{
    border-color: #959494;
    margin-left: 20px;
    margin-right: 20px;
  }
  .ipt1{
    margin: 30px 45px 0 45px;
    font-size: 10px;
    color: #9e9c9c;
  }
  .ipt1 > a{
    color: #f15d17;
  }
  button{
    border-radius: 50px;
    list-style: none;
    border: none;
    width: 100%;
    background-color: #f18143;
    height: 30px;
  }
  .button{
    text-align: center;
    margin: 20px 45px 20px 45px;
  }
  .qiehuan{
    font-size: 10px;
    color: #f15d17;
    margin: 0px 45px 0px 45px;
  }
  .img{
    margin: 50px 45px 0px 45px;
    text-align: center;
  }
  .ewm{
    margin-left: 110px;
  }
</style>
